<template>
	<view class="content">
		<view class="base-page-bg-img"><image class="img" src="/static/image/hszg.png" mode="aspectFit"></image></view>
		<image class="img" src="../../static/image/hszg.png" mode="aspectFit"></image>
		<image class="img2" src="../../static/image/ai_text.png" mode="aspectFit"></image>
		<view class="text">根据您的知识薄弱点​​和​​答题数据,<br/>动态生成个性化练习题​​和​​题后总结告</view>
		<view class="bottom-text">
			<view class="text2">告别题海战术，让每一次<br/>练习都直击短板，复习更高效</view>
			<view class="plan">
				<view class="line" :style="{'width': 30+'%'}"></view>
				<view class="item">高效</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.content{
		background: linear-gradient( 180deg, #CAE3FF 0%, #FFFFFF 34%, #FFFFFF 100%);
	}
	.img{
		width: 300rpx;
		transform: translate(235rpx,-40rpx);
	}
	.img2{
		display: block;
		width: 468rpx;
		margin: -250rpx auto -20rpx;
	}
	.text{
		text-align: center;
		font-size: 34rpx;
		color: #646265;
	}
	.bottom-text{
		position: fixed;
		bottom: 68rpx;
		left: 54rpx;
		right: 54rpx;
	}
	.text2{
		margin-bottom: 52rpx;
		padding-left: 14rpx;
		font-size: 44rpx;
		font-weight: 600;
		color: #000;
	}
	.plan{
		position: relative;
		height: 58rpx;
		background-color: #EBEBE8;
		border-radius: 42rpx;
		overflow: hidden;
		font-size: 32rpx;
		color: #646464;
		line-height: 58rpx;
		.line{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			border-radius: 42rpx;
			background-color: #42B8BC;
		}
	}
</style>